<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代理商注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/vant@2.12/lib/index.css" />
    <style>
        body { background-color: #f7f8fa; }
        #app { padding: 30px 20px; }
        .register-title {
            text-align: center;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 40px;
            color: #333;
        }
        .login-link {
             text-align: center; 
             margin-top: 20px;
        }
        .login-link a {
            color: #1989fa; 
            text-decoration: none;
        }
    </style>
</head>
<body>

<div id="app">
    <h1 class="register-title">代理商注册</h1>
    <van-form @submit="onSubmit">
        <van-field
            v-model="puid"
            name="puid"
            label="邀请码"
            placeholder="请输入上级代理ID"
            :rules="[{ required: true, message: '请填写邀请码' }]"
        ></van-field>
        <van-field
            v-model="username"
            name="username"
            label="店铺名称"
            placeholder="请输入您的店铺或团队名称"
            :rules="[{ required: true, message: '请填写店铺名称' }]"
        ></van-field>
        <van-field
            v-model="account"
            name="account"
            label="登录账号"
            placeholder="用于登录的账号"
            :rules="[{ required: true, message: '请填写登录账号' }]"
        ></van-field>
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="登录密码"
            placeholder="8位以上，需包含字母和数字"
            :rules="[{ required: true, message: '请填写密码' }]"
        ></van-field>
        <van-field
            v-model="confirmPassword"
            type="password"
            name="confirmPassword"
            label="确认密码"
            placeholder="请再次输入密码"
            :rules="[{ validator: passwordValidator, message: '两次输入的密码不一致' }]"
        ></van-field>
        <div style="margin: 25px 0;">
            <van-button round block type="info" native-type="submit" :loading="isLoading">
                立即注册
            </van-button>
        </div>
    </van-form>
    <div class="login-link">
        <a href="./login.html">已有账号？返回登录</a>
    </div>
</div>

<script src="https://jsd.cdn.zzko.cn/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://jsd.cdn.zzko.cn/npm/vant@2.12/lib/vant.min.js"></script>
<script src="https://jsd.cdn.zzko.cn/npm/jquery@3.6/dist/jquery.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                puid: '',
                username: '',
                account: '',
                password: '',
                confirmPassword: '',
                isLoading: false
            };
        },
        methods: {
            // 自定义密码验证器
            passwordValidator(val) {
                return val === this.password;
            },
            onSubmit(values) {
                this.isLoading = true;
                
                $.ajax({
                    type: 'POST',
                    url: './register_handler.php', // 我们下一步创建的注册处理文件
                    dataType: 'json',
                    data: values,
                    success: (res) => {
                        this.isLoading = false;
                        // code为2代表成功，其他为失败
                        if (res.code === 2) {
                            this.$toast.success(res.msg);
                            setTimeout(() => {
                                window.location.href = './login.html';
                            }, 1500);
                        } else {
                            this.$toast.fail(res.msg);
                        }
                    },
                    error: () => {
                        this.isLoading = false;
                        this.$toast.fail('网络请求失败，请稍后再试');
                    }
                });
            }
        }
    });
</script>

</body>
</html>